<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 21:51:54
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:03:39
 * @FilePath: \kgantt\core\components\taskitem\bar\Bar.vue
 * @Description: 
-->
<template>
  <g class="kgantt-barWrapper" :tabindex="0">
    <BarDisplay
      :x="task.x1"
      :y="task.y"
      :width="task.x2-task.x1"
      :height="task.height"
      :progress-x="task.progressX"
      :progress-width="task.progressWidth"
      :bar-corner-radius="task.barCornerRadius"
      :background-color="task.styles.backgroundColor"
      :background-selected-color="task.styles.backgroundSelectedColor"
      :progress-color="task.styles.progressColor"
      :progress-selected-color="task.styles.progressSelectedColor"
      :is-selected="isSelected"
      @on-mouse-down="disPlayMouseDown"
    ></BarDisplay>
    <g class="kgantt-handleGroup">
      <g v-if="isDateChangeable">
        {/* left */}
        <BarDateHandle
          :x="task.x1 + 1"
          :y="task.y + 1"
          :width="task.handleWidth"
          :height="handleHeight"
          :bar-corner-radius="task.barCornerRadius"
          @on-mouse-down="dateHandleMouseDownLeft"
        >
        </BarDateHandle>
        {/* right */}
        <BarDateHandle
          :x="task.x2 - task.handleWidth - 1"
          :y="task.y + 1"
          :width="task.handleWidth"
          :height="handleHeight"
          :bar-corner-radius="task.barCornerRadius"
          @on-mouse-down="dateHandleMouseDownRight"
        >
        </BarDateHandle>
      </g>
      <BarProgressHandle
        v-if="isProgressChangeable"
        :progress-point="progressPoint"
        @on-mouse-down="progressMouseDown"
      ></BarProgressHandle>
    </g>
  </g>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, watch } from "vue";
import { getProgressPoint } from "../../../helpers/barHelper";
import BarDisplay from "./BarDisplay.vue";
import BarProgressHandle from "./BarProgressHandle.vue";
import BarDateHandle from "./BarDateHandle.vue";
import { BarTask } from "../../../types/barTask";
const props = defineProps({
  task: {
    type: Object as PropType<BarTask>,
    default: {},
  },
  isProgressChangeable: {
    type: Boolean,
    default: false,
  },
  isDateChangeable: {
    type: Boolean,
    default: false,
  },
  isSelected: {
    type: Boolean,
    default: false,
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["onEventStart"]);
const progressPoint = ref("");
const updateProgressPoint = () => {
  progressPoint.value = getProgressPoint(
    +!props.rtl * props.task.progressWidth + props.task.progressX,
    props.task.y,
    props.task.height
  );
};
const handleHeight = ref(props.task.height - 2);
const disPlayMouseDown = (event: MouseEvent) => {
  props.isDateChangeable && emits("onEventStart", "move", props.task, event);
};
const dateHandleMouseDownLeft = (event: MouseEvent) => {
  emits("onEventStart", "start", props.task, event);
};
const dateHandleMouseDownRight = (event: MouseEvent) => {
  emits("onEventStart", "end", props.task, event);
};
const progressMouseDown = (event: MouseEvent) => {
  emits("onEventStart", "progress", props.task, event);
};
watch(
  () => props.task,
  () => {
    updateProgressPoint();
  }
);
onMounted(() => {
  updateProgressPoint();
});
</script>